const graphs = {
    // 播放按钮
    playBtutton: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
    <path fill="#fff" d="M6 0a1 1 0 011 1v18a1 1 0 01-1 1H2a1 1 0 01-1-1V1a1 1 0 011-1h4zm12 0a1 1 0 011 1v18a1 1 0 01-1 1h-4a1 1 0 01-1-1V1a1 1 0 011-1h4z"></path>
    <filter id="drop-shadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2"></feGaussianBlur>
      <feOffset dx="0" dy="0" result="offsetblur"></feOffset>
      <feFlood flood-color="rgba(0,0,0,0.6)"></feFlood>
      <feComposite in2="offsetblur" operator="in"></feComposite>
      <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
    </svg>`,

    // 暂停按钮
    stopButton: `<svg
    xmlns="http://www.w3.org/2000/svg"
    width="20"
    height="20"
    viewBox="0 0 20 20"
  >
    <path
      fill="#fff"
      d="M19.0773 11.4127L6.589 19.4475c-.7803.502-1.8198.2764-2.3218-.5039A1.68 1.68 0 014 18.0346V1.9652c0-.9279.7522-1.68 1.68-1.68a1.68 1.68 0 01.909.2671L19.0773 8.587c.7803.502 1.0059 1.5416.5039 2.3219a1.68 1.68 0 01-.5039.5038z"
    ></path>
  </svg>`
}

const videoOptions = (() => {
    // 获取video对象
    const video = document.querySelector("#video");
    const btnPlay = document.querySelector(".btn-play");
    const endTime = document.querySelector("#duration");
    const timed = document.querySelector("#currentTime");
    const progressCached = document.querySelector("#progress-cached");
    const progressFinished = document.querySelector("#progress-finished");
    const autoRation = document.querySelector(".ratio-list");
    // 初始化视频播放的状态
    let videoState = true;
    // 视频源数组
    let videoSrcArray = ['//f.video.weibocdn.com/0024stqpgx07MMDtfXa801041202d1nU0E010.mp4?label=mp4_ld&template=640x360.25.0&trans_finger=6006a648d0db83b7d9951b3cee381a9c&media_id=4638610587320363&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=3&ot=h&ps=3lckmu&uid=3ZoTIp&ab=3915-g1,966-g1,3601-g3&Expires=1624026126&ssig=ooMt5jRKgK&KID=unistore,video'];
    // 不同清晰度的视频源
    let videoRatio = {
        L: '//f.video.weibocdn.com/0024stqpgx07MMDtfXa801041202d1nU0E010.mp4?label=mp4_ld&template=640x360.25.0&trans_finger=6006a648d0db83b7d9951b3cee381a9c&media_id=4638610587320363&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=3&ot=h&ps=3lckmu&uid=3ZoTIp&ab=3915-g1,966-g1,3601-g3&Expires=1624026126&ssig=ooMt5jRKgK&KID=unistore,video',
        M: '//f.video.weibocdn.com/003KrlmCgx07MMDtDp5l01041203pTXM0E020.mp4?label=mp4_hd&template=852x480.25.0&trans_finger=d8257cc71422c9ad30fe69ce9523c87b&media_id=4638610587320363&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=3&ot=h&ps=3lckmu&uid=3ZoTIp&ab=3915-g1,966-g1,3601-g3&Expires=1624026126&ssig=dO2nW19HC6&KID=unistore,video',
        H: '//f.video.weibocdn.com/002nZuotgx07MMDuSYuH01041206rzoB0E030.mp4?label=mp4_720p&template=1280x720.25.0&trans_finger=775cb0ab963a74099cf9f840cd1987f1&media_id=4638610587320363&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=3&ot=h&ps=3lckmu&uid=3ZoTIp&ab=3915-g1,966-g1,3601-g3&Expires=1624026126&ssig=5i%2B0BXIN6q&KID=unistore,video',
        HP: '//f.video.weibocdn.com/0006LlAMgx07MMDxE6UU0104120cefde0E050.mp4?label=mp4_1080p&template=1920x1080.25.0&trans_finger=d88af6227b88881484d2b59dfbafa136&media_id=4638610587320363&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=3&ot=h&ps=3lckmu&uid=3ZoTIp&ab=3915-g1,966-g1,3601-g3&Expires=1624026126&ssig=6ATEIptvr5&KID=unistore,video'

    }

    window.onload = () => {
        // debugger
        //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
        console.log("2:" + video.readyState);
        if (video.error) {
            window.alert("视频加载失败！🤔," + "错误码:" + video.error.code);
        } else {
            // Media.currentSrc; //返回当前资源的URL
            console.log(video.currentSrc);
            // Media.src = value; //返回或设置当前资源的URL
            // video.src = videoSrcArray[0];
            // Media.canPlayType(type); //是否能播放某种格式的资源
            // console.log(video.canPlayType());
        }
    }

    let progressTimer = () => {
        console.log("1:" + video.currentTime);
        video.addEventListener("loadedmetadata", function(event) {
            console.log(event);
            endTime.innerHTML = Math.floor(video.duration / 60) + ":" + (Math.floor((Number((video.duration / 60)) - Math.floor(video.duration / 60)) * 60));
            setInterval(() => {
                // 设置当前进度条
                progressFinished.style.width = (video.currentTime / video.duration) * 100 + "%"
                if (video.currentTime < 60) {
                    if (video.currentTime < 10) {
                        timed.innerHTML = "00:0" + Math.floor(video.currentTime);
                    } else {
                        timed.innerHTML = "00:" + Math.floor(video.currentTime);
                    }
                } else if (video.currentTime >= 60 && video.currentTime < 600) {
                    console.log("1分钟了");
                    timed.innerHTML = "0" + Math.floor(video.currentTime / 60) + ":" + (Math.floor((Number((video.currentTime / 60)) - Math.floor(video.currentTime / 60)) * 60) < 10 ? "0" + Math.floor((Number((video.currentTime / 60)) - Math.floor(video.currentTime / 60)) * 60) : Math.floor((Number((video.currentTime / 60)) - Math.floor(video.currentTime / 60)) * 60));
                }
                // timed.innerHTML = video.currentTime / 60;
                if (video.buffered.length === 0) return;

                const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
                progressCached.style.width = (bufferedSeconds / video.duration) * 100 + "%";
                // console.log(`${bufferedSeconds} seconds of video are ready to play.` + video.duration);
            }, 1000)
        });
    }

    progressTimer();

    return {
        videoState,
        btnPlay,
        autoRation,
        videoSrcArray,
        videoRatio,
    }
})();

// 设置视频源
let setVideoSrc = (videoSrc) => {
    video.src = videoSrc;
}


// 播放视频
let playVideo = () => {
    video.play();
}

// 暂停视频
let stopVideo = () => {
    video.pause();
}

// 设置视频状态
let setVideoState = () => {
    if (videoOptions.videoState) {
        videoOptions.videoState = false;
        playVideo();
        videoOptions.btnPlay.innerHTML = graphs.playBtutton
    } else {
        videoOptions.videoState = true;
        stopVideo();
        videoOptions.btnPlay.innerHTML = graphs.stopButton;
    }
}

// 设置视频清晰度面板显示
let setVideoRationaleShow = () => {
        videoOptions.autoRation.style.display = 'block';
    }
    // 设置视频清晰度面板隐藏
let setVideoRationaleHide = () => {
    videoOptions.autoRation.style.display = 'none';
}

function setVideoStartState() {
    videoOptions.btnPlay.innerHTML = graphs.playBtutton;
    videoOptions.videoState = false;
}

function setVideoStopState() {
    videoOptions.btnPlay.innerHTML = graphs.stopButton;
    videoOptions.videoState = true;
}

let changeVideoRatio = (ratioValue) => {
    switch (ratioValue) {
        case 360:
            {
                setVideoSrc(videoOptions.videoRatio.L);
                // 当状态放生了改变之后，播放按钮设置为原先的状态
                setVideoStopState();
                break;
            }
        case 480:
            {
                setVideoSrc(videoOptions.videoRatio.M);
                setVideoStopState();
            }
        case 720:
            {
                setVideoSrc(videoOptions.videoRatio.H);
                setVideoStopState();
            }
        case 1080:
            {
                setVideoSrc(videoOptions.videoRatio.HP);
                setVideoStopState();
            }
        default:
            {
                setVideoSrc(videoOptions.videoRatio.H);
            }
    }
}